﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .auto-style1 {
            color: #000000;
        }
    </style>
</head>
<body>
    
<h2 >PopupManager</h2>
<p>Popup manager helps to show a framework element control or page as a popup with single statement. The popup can be align left, top, right, bottom or center to the triggering element. You can also define the margin around the triggering element.&nbsp; &nbsp; </p>
<h3>Namespace</h3>
<p><code>StoreAppLib.Controls</code></p>
<h3>Using PopupManager</h3>
<p>To use PopupManager in your project, add reference to the StoreAppLib project or install StoreAppLib from Visual Studio "Manage NuGet Packages" tool.</p>
    <p>
        Add the following code inside the tap event of the triggering source to show a framework element in a popup.
        Use PopupAlignment enum to set the popup position relative to the triggering source.</p>
    
<code>
    <span style="font-size: 9.5pt;  color: #0000ff;">
    private void<span style="font-size: 9.5pt; "><span style="font-size: 9.5pt; "> OnClickMeTapped</span></span></span><span style="font-size: 9.5pt; "><span style="font-size: 9.5pt; "><span style="font-size: 9.5pt;  color: #000000;" >(</span></span></span><span style="font-size: 9.5pt;  color: #0000ff;">object<span style="font-size: 9.5pt; "><span style="font-size: 9.5pt; "> </span><span style="font-size: 9.5pt;  " class="auto-style1">sender,</span><span style="font-size: 9.5pt;  color: #0000ff;"> </span> </span></span><span style="font-size: 9.5pt;  color: #0000ff;"><span style="font-size: 9.5pt;  color: #2b91af;"><span style="font-size: 9.5pt;  color: #2b91af;"><span style="font-size: 9.5pt;  color: #2b91af;">TappedRoutedEventArgs </span></span></span><span style="font-size: 9.5pt; "><span style="font-size: 9.5pt; ">e</span><span style="font-size: 9.5pt;  " class="auto-style1">)<br /></span><span style="font-size: 9.5pt;  color: #0000ff;">{<br />&nbsp;</span></span></span><span style="font-size: 9.5pt;  color: #0000ff;"><span style="font-size: 9.5pt;  color: #008000;"><span style="font-size: 9.5pt;  color: #008000;"><span style="font-size: 9.5pt;  color: #008000;">&nbsp;&nbsp; //// Your custom control instance<br /></span></span></span><span style="font-size: 9.5pt;  color: #2b91af;"><span style="font-size: 9.5pt;  color: #2b91af;"><span style="font-size: 9.5pt;  color: #2b91af;">&nbsp;&nbsp;&nbsp; PopupChild</span></span></span><span style="font-size: 9.5pt; "><span style="font-size: 9.5pt; "> </span>
    <span style="font-size: 9.5pt;  " class="auto-style1">content</span><span style="font-size: 9.5pt;  color: #0000ff;"> = </span> </span></span><span style="font-size: 9.5pt;  color: #0000ff;"><span style="font-size: 9.5pt;  color: #0000ff;"><span style="font-size: 9.5pt;  color: #0000ff;"><span style="font-size: 9.5pt;  color: #0000ff;">new</span></span></span><span style="font-size: 9.5pt; "><span style="font-size: 9.5pt; "> </span></span><span style="font-size: 9.5pt;  color: #2b91af;"><span style="font-size: 9.5pt;  color: #2b91af;"><span style="font-size: 9.5pt;  color: #2b91af;">PopupChild</span></span></span></span><span style="font-size: 9.5pt;  "><span style="font-size: 9.5pt; "><span style="font-size: 9.5pt; color: #000000;">(); </span></span></span><span style="font-size: 9.5pt;  color: #008000;">
<p><span style="font-size: 9.5pt;  color: #008000;">&nbsp;&nbsp;&nbsp;&nbsp;//// Open the control in a popup aligning to bottom right of the triggering control (sender)</span></p>
</span><span style="font-size: 9.5pt;  color: #2b91af;">&nbsp;&nbsp;&nbsp; PopupManager</span><span style="font-size: 9.5pt; "><span style="font-size: 9.5pt; ">.Open(sender </span></span><span style="font-size: 9.5pt;  color: #0000ff;"><span style="font-size: 9.5pt;  color: #0000ff;"><span style="font-size: 9.5pt;  color: #0000ff;">as</span></span></span><span style="font-size: 9.5pt; "><span style="font-size: 9.5pt; "> </span></span><span style="font-size: 9.5pt;  color: #2b91af;"><span style="font-size: 9.5pt;  color: #2b91af;"><span style="font-size: 9.5pt;  color: #2b91af;">FrameworkElement</span></span></span><span style="font-size: 9.5pt; "><span style="font-size: 9.5pt; ">, content, </span></span><span style="font-size: 9.5pt;  color: #2b91af;"><span style="font-size: 9.5pt;  color: #2b91af;"><span style="font-size: 9.5pt;  color: #2b91af;">PopupAlignment</span></span></span><span style="font-size: 9.5pt; ">.BottomRight);<span style="font-size: 9.5pt; "> </span></span>
    <span style="font-size: 9.5pt;  color: #008000;">
<p><span style="font-size: 9.5pt;  color: #008000;">&nbsp;&nbsp;&nbsp; //// The below code give 5 pixel bottom margin<br />
    
<code>
    <span style="font-size: 9.5pt;  color: #008000;">
    &nbsp;&nbsp;&nbsp; //// PopupManager.Open(sender as FrameworkElement, content, PopupAlignment.BottomRight, new Thickness(0, 0, 0, 5));<br />
    <span style="font-size: 9.5pt;  ">
    <span style="font-size: 9.5pt; color: #000000;"">}</span></span></span></code></span></p>
</span>
</code>
    <p>
        Following are the PopupAlignment values.</p>
<ul>
<li><span style="color: red; font-size: 9.5pt;"><code>Left</code></span>: Horizontally align left of popup and triggering source, and vertically align to center of triggering source. </li>
<li><span style="color: red; font-size: 9.5pt;"><code>Right</code></span>: Horizontally align right of popup and triggering source, and vertically align to center of triggering source. </li>
<li><span style="color: red; font-size: 9.5pt;"><code>Center</code></span>: Place popup center of triggering source. </li>
<li><span style="color: red; font-size: 9.5pt;"><code>TopLeft</code></span>: Horizontally align left of popup and triggering source, and vertically align top of triggering source. </li>
<li><span style="color: red; font-size: 9.5pt;"><code>Top</code></span>: Horizontally align center of popup and triggering source, and vertically align top of triggering source. </li>
<li><span style="color: red; font-size: 9.5pt;"><code>TopRight</code></span>: Horizontally align right of popup and triggering source, and vertically align top of triggering source. </li>
<li><span style="color: red; font-size: 9.5pt;"><code>BottomLeft</code></span>: Horizontally align left of popup and triggering source, and vertically align bottom of triggering source. </li>
<li><span style="color: red; font-size: 9.5pt;"><code>Bottom</code></span>: Horizontally align center of popup and triggering source, and vertically align bottom of triggering source. </li>
    <li><span style="color: red; font-size: 9.5pt;"><code>BottomRight</code></span>: Horizontally align right of popup and triggering source, and vertically align bottom of triggering source. </li>
    <li><span style="color: red; font-size: 9.5pt;"><code>TowardsLeft</code></span>: Horizontally place left to triggering source, and vertically align center of triggering source. </li>
    <li><span style="color: red; font-size: 9.5pt;"><code>TowardsRight</code></span>: Horizontally place right to triggering source, and vertically align center of triggering source. </li>
</ul>
    <p>
        &nbsp;</p>
</body>
</html>
